M

MLOG

فارسی

راهنمای جامع تایم‌لاین‌های اسکرول CSS، یک تکنیک قدرتمند جدید انیمیشن وب که انیمیشن‌ها را مستقیماً به موقعیت اسکرول پیوند می‌دهد. یاد بگیرید چگونه تجربیات کاربری جذاب و تعاملی بسازید.

تایم‌لاین اسکرول CSS: انیمیشن‌سازی بر اساس موقعیت اسکرول

انیمیشن‌های مبتنی بر اسکرول در حال متحول کردن طراحی وب هستند و تجربیات کاربری جذاب و تعاملی را ارائه می‌دهند که فراتر از طرح‌بندی‌های ایستا و سنتی است. تایم‌لاین‌های اسکرول CSS یک راه‌حل بومی مرورگر برای ایجاد این انیمیشن‌ها فراهم می‌کنند و پیشرفت انیمیشن را مستقیماً به موقعیت اسکرول یک عنصر پیوند می‌دهند. این امر دنیایی از امکانات خلاقانه را برای افزایش تعامل کاربر و داستان‌سرایی در وب باز می‌کند.

تایم‌لاین‌های اسکرول CSS چه هستند؟

تایم‌لاین‌های اسکرول CSS به شما امکان می‌دهند پیشرفت یک انیمیشن یا انتقال CSS را بر اساس موقعیت اسکرول یک کانتینر اسکرول مشخص کنترل کنید. به جای تکیه بر انیمیشن‌های مبتنی بر زمان سنتی، که در آن مدت زمان انیمیشن ثابت است، پیشرفت انیمیشن مستقیماً به میزان اسکرول کاربر بستگی دارد. این بدان معناست که انیمیشن در پاسخ مستقیم به رفتار اسکرول کاربر متوقف، پخش، به عقب برگردانده یا سریع به جلو برده می‌شود و تجربه‌ای طبیعی‌تر و تعاملی‌تر ایجاد می‌کند. یک نوار پیشرفت را تصور کنید که با اسکرول کردن به پایین صفحه پر می‌شود، یا عناصری که با ورود به ویوپورت به تدریج ظاهر و محو می‌شوند - این‌ها انواعی از افکت‌هایی هستند که با تایم‌لاین‌های اسکرول CSS به راحتی قابل دستیابی هستند.

چرا از تایم‌لاین‌های اسکرول CSS استفاده کنیم؟

مفاهیم و خصوصیات کلیدی

درک مفاهیم اصلی و خصوصیات CSS برای استفاده مؤثر از تایم‌لاین‌های اسکرول بسیار مهم است:

۱. تایم‌لاین اسکرول (Scroll Timeline)

خصوصیت scroll-timeline کانتینر اسکرول را که به عنوان تایم‌لاین برای انیمیشن استفاده می‌شود، تعریف می‌کند. شما می‌توانید یک تایم‌لاین نام‌گذاری شده (مثلاً --my-scroll-timeline) مشخص کنید یا از مقادیر از پیش تعریف شده مانند auto (نزدیک‌ترین کانتینر اسکرول والد)، none (بدون تایم‌لاین اسکرول) یا root (ویوپورت سند) استفاده کنید.

/* تعریف یک تایم‌لاین اسکرول نام‌گذاری شده */
.scroll-container {
  scroll-timeline: --my-scroll-timeline;
}

/* استفاده از تایم‌لاین نام‌گذاری شده در انیمیشن */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

۲. تایم‌لاین انیمیشن (Animation Timeline)

خصوصیت animation-timeline یک تایم‌لاین اسکرول را به یک انیمیشن اختصاص می‌دهد. این خصوصیت پیشرفت انیمیشن را به موقعیت اسکرول کانتینر اسکرول مشخص شده پیوند می‌دهد. شما همچنین می‌توانید از تابع view() استفاده کنید که یک تایم‌لاین بر اساس تقاطع یک عنصر با ویوپورت ایجاد می‌کند.

/* پیوند دادن انیمیشن به تایم‌لاین اسکرول */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

/* استفاده از view() برای انیمیشن‌های مبتنی بر ویوپورت */
.animated-element {
  animation-timeline: view();
}

۳. آفست‌های اسکرول (Scroll Offsets)

آفست‌های اسکرول نقاط شروع و پایان تایم‌لاین اسکرول را که با ابتدا و انتهای انیمیشن مطابقت دارند، تعریف می‌کنند. این آفست‌ها به شما امکان می‌دهند دقیقاً کنترل کنید که انیمیشن بر اساس موقعیت اسکرول چه زمانی شروع و متوقف شود. شما می‌توانید از کلمات کلیدی مانند cover، contain، entry، exit و مقادیر عددی (مانند 100px، 50%) برای تعریف این آفست‌ها استفاده کنید.

/* انیمیشن زمانی که عنصر کاملاً قابل مشاهده است */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: entry 0% cover 100%;
}

/* شروع انیمیشن ۱۰۰ پیکسل از بالا، پایان زمانی که پایین عنصر ۲۰۰ پیکسل از پایین ویوپورت فاصله دارد */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: 100px exit 200px;
}

۴. محور تایم‌لاین اسکرول (Scroll Timeline Axis)

خصوصیت scroll-timeline-axis محوری را که تایم‌لاین اسکرول در امتداد آن پیشرفت می‌کند، مشخص می‌کند. این می‌تواند روی block (اسکرول عمودی)، inline (اسکرول افقی)، both (هر دو محور) یا auto (توسط مرورگر تعیین می‌شود) تنظیم شود. هنگام استفاده از `view()`، توصیه می‌شود که محور را به صراحت مشخص کنید.

/* تعریف محور تایم‌لاین اسکرول */
.scroll-container {
  scroll-timeline-axis: y;
}

/* با view */
.animated-element {
  scroll-timeline-axis: block;
}

۵. محدوده انیمیشن (Animation Range)

خصوصیت `animation-range` آفست‌های اسکرول (نقاط شروع و پایان) را که با شروع (0%) و پایان (100%) انیمیشن مطابقت دارند، تعریف می‌کند. این به شما امکان می‌دهد موقعیت‌های اسکرول خاص را به پیشرفت انیمیشن نگاشت کنید.

/* نگاشت کل محدوده اسکرول به انیمیشن */
.animated-element {
  animation-range: entry 0% cover 100%;
}

/* شروع انیمیشن در نیمه راه محدوده اسکرول */
.animated-element {
  animation-range: 50% 100%;
}

/* استفاده از مقادیر پیکسلی */
.animated-element {
  animation-range: 100px 500px;
}

مثال‌های عملی و موارد استفاده

بیایید چند مثال عملی از نحوه استفاده از تایم‌لاین‌های اسکرول CSS برای ایجاد انیمیشن‌های جذاب را بررسی کنیم:

۱. نوار پیشرفت (Progress Bar)

یک مورد استفاده کلاسیک برای انیمیشن‌های مبتنی بر اسکرول، نوار پیشرفتی است که با اسکرول کاربر به پایین صفحه پر می‌شود. این کار بازخورد بصری در مورد میزان پیشرفت کاربر در محتوا ارائه می‌دهد.

/* CSS */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 5px;
  background-color: #4CAF50;
  width: 0%;
  animation: fillProgressBar linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 0%;
  animation-fill-mode: forwards;
}

@keyframes fillProgressBar {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <p>... محتوای شما اینجا ...</p>
</div>

این کد یک نوار پیشرفت ثابت در بالای صفحه ایجاد می‌کند. انیمیشن fillProgressBar به تدریج عرض نوار پیشرفت را از 0% به 100% با اسکرول کاربر به پایین صفحه افزایش می‌دهد. animation-timeline: view() انیمیشن را به پیشرفت اسکرول ویوپورت پیوند می‌دهد و `animation-range` اسکرول را به پیشرفت بصری متصل می‌کند.

۲. محو شدن تدریجی تصویر (Image Fade-In)

شما می‌توانید از تایم‌لاین‌های اسکرول برای ایجاد یک افکت محو شدن تدریجی ظریف برای تصاویر هنگام ورود به ویوپورت استفاده کنید و جذابیت بصری محتوای خود را افزایش دهید.

/* CSS */
.fade-in-image {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HTML */
<img src="image.jpg" class="fade-in-image" alt="Image">

این کد در ابتدا تصویر را پنهان کرده و آن را کمی پایین‌تر از موقعیت نهایی خود قرار می‌دهد. با اسکرول کردن تصویر به داخل ویوپورت، انیمیشن fadeIn به تدریج شفافیت را افزایش داده و تصویر را به موقعیت اصلی خود منتقل می‌کند و یک افکت محو شدن تدریجی روان ایجاد می‌کند. `animation-range` مشخص می‌کند که انیمیشن زمانی شروع می‌شود که لبه بالایی تصویر 25% وارد ویوپورت شده و زمانی کامل می‌شود که لبه پایینی 75% وارد ویوپورت شده باشد.

۳. عناصر چسبان (Sticky Elements)

افکت‌های «چسبان» را ایجاد کنید - جایی که عناصر در حین اسکرول به بالای ویوپورت می‌چسبند - اما با کنترل و انتقال‌های پیشرفته. یک نوار ناوبری را تصور کنید که با اسکرول کاربر به پایین به آرامی به یک نسخه فشرده تبدیل می‌شود.

/*CSS*/
.sticky-container {
  height: 200px; /* متناسب با نیاز خود تنظیم کنید */
  position: relative;
}

.sticky-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  animation: stickyAnimation linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%; /* محدوده را در صورت نیاز تنظیم کنید */
  animation-fill-mode: both;
  z-index: 10;
}

@keyframes stickyAnimation {
  0% {
    position: absolute;
    top: 0;
  }
  100% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ddd; /* تغییر رنگ برای نشان دادن حالت چسبندگی */
  }
}

/* HTML */
<div class="sticky-container">
  <div class="sticky-element">عنصر چسبان من</div>
</div>

در این مثال، عنصر با ورود به 20% بالای ویوپورت از `position: absolute` به `position: fixed` تغییر می‌کند و یک افکت «چسبیدن» روان ایجاد می‌کند. برای سفارشی کردن رفتار، `animation-range` و خصوصیات CSS را در داخل کی‌فریم‌ها تنظیم کنید.

۴. افکت اسکرول پارالاکس (Parallax Scrolling Effect)

یک افکت اسکرول پارالاکس ایجاد کنید که در آن لایه‌های مختلف محتوا با سرعت‌های متفاوتی با اسکرول کاربر حرکت می‌کنند و به صفحه عمق و جذابیت بصری می‌بخشند.

/* CSS */
.parallax-container {
  position: relative;
  height: 500px; /* متناسب با نیاز خود تنظیم کنید */
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.parallax-layer--bg {
  background-image: url("background.jpg");
  animation: parallaxBg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

.parallax-layer--fg {
 background-image: url("foreground.png");
  animation: parallaxFg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

@keyframes parallaxBg {
 to {
    transform: translateY(50px); /* برای سرعت پارالاکس تنظیم کنید */
 }
}

@keyframes parallaxFg {
 to {
   transform: translateY(100px); /* برای سرعت پارالاکس تنظیم کنید */
 }
}

/* HTML */
<div class="parallax-container">
  <div class="parallax-layer parallax-layer--bg"></div>
  <div class="parallax-layer parallax-layer--fg"></div>
</div>

این مثال دو لایه با تصاویر پس‌زمینه مختلف ایجاد می‌کند. انیمیشن‌های `parallaxBg` و `parallaxFg` لایه‌ها را با سرعت‌های مختلف جابجا می‌کنند و افکت پارالاکس را ایجاد می‌کنند. مقادیر `translateY` را در کی‌فریم‌ها برای کنترل سرعت هر لایه تنظیم کنید.

۵. انیمیشن آشکار شدن متن (Text Reveal Animation)

متن را کاراکتر به کاراکتر با اسکرول کاربر از یک نقطه مشخص آشکار کنید، توجه را جلب کرده و جنبه داستان‌سرایی محتوا را تقویت کنید.

/* CSS */
.text-reveal-container {
  position: relative;
  overflow: hidden;
}

.text-reveal {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: textRevealAnimation steps(1) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
  width: 0;
}

@keyframes textRevealAnimation {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="text-reveal-container">
  <span class="text-reveal">این متن با اسکرول شما آشکار خواهد شد.</span>
</div>

این مثال از تابع زمان‌بندی `steps(1)` برای آشکار کردن متن کاراکتر به کاراکتر استفاده می‌کند. `width: 0` در ابتدا متن را پنهان می‌کند و انیمیشن `textRevealAnimation` به تدریج عرض را برای آشکار کردن کل متن افزایش می‌دهد. `animation-range` را برای کنترل زمان شروع و پایان انیمیشن آشکار شدن متن تنظیم کنید.

سازگاری مرورگرها و Polyfillها

تایم‌لاین‌های اسکرول CSS یک فناوری نسبتاً جدید هستند و پشتیبانی مرورگرها هنوز در حال تکامل است. از اواخر سال 2023، مرورگرهای اصلی مانند کروم و اج پشتیبانی خوبی ارائه می‌دهند. فایرفاکس و سافاری به طور فعال در حال کار بر روی پیاده‌سازی این ویژگی هستند. ضروری است که قبل از پیاده‌سازی تایم‌لاین‌های اسکرول در تولید، سازگاری فعلی مرورگرها را بررسی کنید. می‌توانید از منابعی مانند Can I use برای تأیید وضعیت پشتیبانی استفاده کنید.

برای مرورگرهایی که به طور بومی از تایم‌لاین‌های اسکرول پشتیبانی نمی‌کنند، می‌توانید از polyfillها برای ارائه عملکرد مشابه استفاده کنید. یک polyfill قطعه‌ای از کد جاوا اسکریپت است که ویژگی گمشده را با استفاده از جاوا اسکریپت پیاده‌سازی می‌کند. چندین polyfill برای تایم‌لاین‌های اسکرول CSS موجود است که به شما امکان می‌دهد حتی در مرورگرهای قدیمی‌تر نیز از این ویژگی استفاده کنید.

ملاحظات دسترسی‌پذیری

در حالی که انیمیشن‌های مبتنی بر اسکرول می‌توانند تجربه کاربری را بهبود بخشند، در نظر گرفتن دسترسی‌پذیری برای اطمینان از اینکه وب‌سایت شما برای همه، از جمله کاربران دارای معلولیت، قابل استفاده است، بسیار مهم است.

بهترین شیوه‌ها و نکات

در اینجا چند بهترین شیوه و نکته برای استفاده مؤثر از تایم‌لاین‌های اسکرول CSS آورده شده است:

ملاحظات جهانی برای طراحی انیمیشن

هنگام طراحی انیمیشن برای مخاطبان جهانی، این نکات را در ذهن داشته باشید:

نتیجه‌گیری

تایم‌لاین‌های اسکرول CSS روشی قدرتمند و کارآمد برای ایجاد انیمیشن‌های وب جذاب و تعاملی ارائه می‌دهند. با پیوند دادن پیشرفت انیمیشن به موقعیت اسکرول، می‌توانید تجربیاتی ایجاد کنید که پویاتر، پاسخگوتر و کاربرپسندتر هستند. در حالی که پشتیبانی مرورگرها هنوز در حال تکامل است، مزایای استفاده از تایم‌لاین‌های اسکرول CSS - عملکرد بهبودیافته، رویکرد اعلانی و تجربه کاربری پیشرفته - آن‌ها را به ابزاری ارزشمند برای توسعه‌دهندگان وب مدرن تبدیل می‌کند. همانطور که با تایم‌لاین‌های اسکرول آزمایش می‌کنید، به یاد داشته باشید که دسترسی‌پذیری را در اولویت قرار دهید و زمینه جهانی مخاطبان خود را برای ایجاد تجربیات وب واقعاً فراگیر و جذاب در نظر بگیرید.

این فناوری جدید و هیجان‌انگیز را بپذیرید و دنیایی از امکانات خلاقانه را برای پروژه‌های وب خود باز کنید. آینده انیمیشن وب اینجاست و با اسکرول هدایت می‌شود!